/**
 * create by young (young2f@outlook.com) on 2020/9/16
 * 厂家直发确认
 */


'use strict';
import React from 'react';
import {Button, DatePicker, Form, Input, InputNumber, notification, Table} from 'antd';

import FormBase from '../../../components/Base/FormBase';
import {connect} from "dva";
import moment from 'moment';
import 'moment/locale/zh-cn';
import ViewTitle from "../../../components/ViewTitle";
import {FormField, FormLayout, ModalFooter} from "antd-extra";
import styles from "../../index.less";

moment.locale('zh-cn');
const table = 'ProcureOrder';
@Form.create()
@connect(({
            user,
            global,
            sales,
            material,
            store
          }) => ({...user, ...material, ...sales, ...global, ...store}))
export default class ModalShippedFromManufacturer extends FormBase {
  constructor(props) {
    super(props);
    const {record} = props;
    this.state = {...record};
  }

  componentDidMount() {


  }

  renderFoot = () => {
    const {foot, value, modalRef, form, callback} = this.props;
    const {materialLots} = this.state;
    if (foot) {
      return foot(value, modalRef);
    } else {
      return (
        <ModalFooter>
          <Button type="primary" onClick={() => {
            const {modalRef} = this.props;
            form.validateFields((err, values) => {
              if (err) {
                const {code} = err;
                const {errors} = code;
                errors.forEach(item => {
                  notification.error(item);
                });
                return;
              }
              const prod = this.state;
              _.merge(prod, values);
              prod.lotCode = 'OUT' + moment().from('YYYYMMDDHHmmss');
               callback(prod);
              modalRef.close();
            });
          }}>确定</Button>

          <Button onClick={() => {
            modalRef.close();
          }}>取消</Button>
        </ModalFooter>
      );
    }
  };

  prodTableCol() {
    return [
      {
        title: "物料", dataIndex: 'name', key: 'name', render: (value, record) => {
          const {code} = record;
          return this.getProductionElement(code, value);
        }
      },
      {title: "物料规格", key: "spec", dataIndex: "spec"},
      {title: "物料编号", key: "number", dataIndex: "number"},
      {title: "物料类别", key: "type", dataIndex: "type"},
      {title: "物料形态", key: "subcategory", dataIndex: "subcategory"},
      {title: "数量", key: "count", dataIndex: "count"},
      {title: "入库数量", key: "count", dataIndex: "count"},
      {
        title: "入库时间", key: "count", dataIndex: "count", render: v => {
          return <div>{moment().format('YYYY-MM-DD')}</div>;
        }
      }
    ];
  }

  prodInfo() {
    const {prodName, prodCode, shippingMan, deliverWay, pkg, count, memo} = this.state;
    const {form, cols = 4} = this.props;
    return <FormLayout form={form} cols={cols}>
      <FormField
        label={'品名'}
        name={'prodName'}
        initialValue={prodName}
      >
        <Input disabled style={{width: '100%'}}></Input>
      </FormField>

      <FormField
        label={'编码'}
        name={'prodCode'}
        initialValue={prodCode}
      >
        <Input disabled style={{width: '100%'}}></Input>
      </FormField>
      <FormField
        label={'数量'}
        name={'count'}
        initialValue={count}
      >
        <Input disabled style={{width: '100%'}}></Input>
      </FormField>

      <FormField
        label={'发货方式'}
        name={'deliverWay'}
        initialValue={deliverWay}
      >
        <Input disabled style={{width: '100%'}}></Input>
      </FormField>
      <FormField
        label={'包装'}
        name={'pkg'}
        initialValue={pkg}
      >
        <Input disabled style={{width: '100%'}}></Input>
      </FormField>
      <FormField
        label={'备注'}
        name={'memo'}
        initialValue={memo}
      >
        <Input disabled style={{width: '100%'}}></Input>
      </FormField>
      <FormField
        label={'出货数量'}
        name={'outboundCount'}
        required={true}
      >
        <InputNumber style={{width: '100%'}}></InputNumber>
      </FormField>

      <FormField
        label={'承运人'}
        name={'shippingMan'}
        initialValue={shippingMan}
        required={true}
      >
        <Input style={{width: '100%'}}></Input>
      </FormField>
      <FormField
        label={'运费'}
        name={'shippingFee'}
        required={true}
      >
        <InputNumber style={{width: '100%'}}></InputNumber>
      </FormField>
      <FormField
        label={'出货时间'}
        name={'outboundDate'}
        required={true}
        initialValue={moment()}
      >
        <DatePicker style={{width: '100%'}}></DatePicker>
      </FormField>
    </FormLayout>;
  }

  render() {
    const {style} = this.props;
    const {materialLots} = this.state;

    return (
      <div style={{...style}}>
        {<ViewTitle
          title={'发货批次信息'}
          level={1}
        ></ViewTitle>}
        {this.prodInfo()}
        <ViewTitle
          title={'入库批次信息'}
          level={1}
        ></ViewTitle>
        <Table
          className={styles.antTable}
          bordered={true}
          columns={this.prodTableCol()}
          dataSource={materialLots}
          scroll={{x: true}}
          pagination={true}
        ></Table>
        {this.renderFoot()}
      </div>

    );
  }
}

